<template>

	<view>
		<uni-nav-bar statusBar @clickLeft='clickLeft()' :border='false' color="#fff" fixed
			:backgroundColor='backgroundColor' left-icon="left" title="商家门店入驻">
		</uni-nav-bar>
		<image class="topImage" src="/static/image/settled.png" mode="widthFix"></image>
		<view v-if="isShow" class="contentView1 flex-column-center">

			<!-- 待审核 -->
			<view v-if='Number(userInfo.shop_status)==20' class="flex-column-center">
				<image class="statusImage" src="/static/image/settled1.png" mode="scaleToFill"></image>
				<view class="statusTitle">
					资料已提交，审核中
				</view>
			</view>
			<!-- 审核通过 -->
			<view v-if='Number(userInfo.shop_status)==30' class="flex-column-center">
				<image class="statusImage" src="/static/image/settled3.png" mode="scaleToFill"></image>
				<view class="statusTitle">
					审核已通过
				</view>
			</view>
			<!-- 驳回 -->
			<view v-if='Number(userInfo.shop_status)==40' class="flex-column-center">
				<image class="statusImage" src="/static/image/settled2.png" mode="scaleToFill"></image>
				<view class="statusTitle">
					审核未通过
				</view>
				<view @click="statusButtonClick()" class="statusButton flex-column-center">
					重新提交
				</view>
			</view>
		</view>
		<view v-else class="">
			<view class="contentView">
				<view class="title">
					<text>商家信息</text>
				</view>
				<view class="itemView flex-row-space-between">
					<view class="itemTitle">
						<text>店铺名称</text>
					</view>
					<input v-model="info.shop_name" class="flex1" placeholder="请填写店铺名称">
				</view>
				<view class="itemView flex-row-space-between">
					<view class="itemTitle">
						店铺LOGO
					</view>
				</view>
				<view class="">
					<uploader @after-read="afterRead" useSlot>
						<image class="uploadImage" :src="info.shop_logo || require('../../static/settled/7.png')" />
					</uploader>
				</view>
<!-- 				<view class="itemView flex-row-space-between">
					<view class="itemTitle">
						联系人
					</view>
					<input v-model="info.link_user" class="flex1" placeholder="请填写联系人" />
				</view> -->

				<view class="itemView flex-row-space-between">
					<view class="itemTitle">
						联系电话
					</view>
					<input v-model="info.link_mobile" class="flex1" type="text" placeholder="请填写联系电话">
				</view>

				<!-- 	<view class="itemView flex-row-space-between">
					<view class="itemTitle">
						经营范围
					</view>
					<input v-model="info.op_object" class="flex1" type="text" placeholder="请填写经营范围">

				</view>
				<view class="itemView flex-row-space-between">
					<view class="itemTitle">
						公司发票类型
					</view>
					<input v-model="info.fp_type" class="flex1" type="text" placeholder="请填写公司发票类型">

				</view>

				<view class="itemView flex-row-space-between">
					<view class="itemTitle">
						公司名称
					</view>
					<input v-model="info.company_name" class="flex1" type="text" placeholder="请填写公司名称">

				</view>
				<view class="itemView flex-row-space-between">
					<view class="itemTitle">
						工商注册号
					</view>
					<input v-model="info.register_no" class="flex1" type="text" placeholder="请填写工商注册号">

				</view>
				
				<view @click="showRegion = true" class="itemView flex-row-space-between">
					<view class="itemTitle">
						省市区
					</view>
					<input  v-model="info.city" class="flex1" type="text" placeholder="请填写省市区">
				
				</view>

				<view class="itemView flex-row-space-between">
					<view class="itemTitle">
						经营位置
					</view>
					<input v-model="info.op_area" class="flex1" type="text" placeholder="请填写经营位置">
				
				</view>
				
				<view class="itemView flex-row-space-between">
					<view class="itemTitle">
						营业执照
					</view>
				</view>
				<view class="">
					<uploader @after-read="afterRead1" useSlot>
						<image class="uploadImage" :src="info.lc_image || require('../../static/settled/7.png')" />

					</uploader>
				</view>

				<view class="itemView flex-row-space-between">
					<view class="itemTitle">
						门头照片
					</view>
				</view>
				<view class="">
					<uploader @after-read="afterRead2" useSlot>
						<image class="uploadImage" :src="info.door_image || require('../../static/settled/7.png')" />
				
					</uploader>
				</view>
				
				<view class="itemView flex-row-space-between">
					<view class="itemTitle">
					公章照片
					</view>
				</view>
				<view class="">
					<uploader @after-read="afterRead3" useSlot>
						<image class="uploadImage" :src="info.gz_image || require('../../static/settled/7.png')" />
				
					</uploader>
				</view>
				 -->



			</view>
			<view class="" style="margin-left: 30rpx;">
				<u-checkbox-group>
					<u-checkbox v-model="isAgreeProtocol" shape="circle">
						<view class="sm row">
							<view class="lighter">已阅读并同意协议</view>
							<view class="primary" @click.stop="toUrl('/pages/login/richText?title=平台协议')">《平台协议》 </view>
							<view class="lighter">与</view>
							<view class="primary" @click.stop="toUrl('/pages/login/richText?title=隐私协议')">《隐私协议》 </view>
						</view>
					</u-checkbox>
				</u-checkbox-group>
			</view>
			<view @click="buttonClick()" class="button flex-row-center">
				提交
			</view>
			<view class="" style="height: 60rpx;">

			</view>
		</view>
		<u-select v-model="showRegion" mode="mutil-column-auto" @confirm="regionChange" :list="lists"></u-select>
	</view>
</template>

<script>
	import area from '@/utils/area'
	import {
		getUserInfo,
		shopApply,

	} from '@/api/user.js';
	import {
		uploadFile,
	} from '@/utils/tools'
	export default {
		components: {},
		computed: {

		},
		data() {
			return {
				showRegion: false,
				backgroundColor: '#C3000600',
				isShow: false,
				userInfo: {},
				isAgreeProtocol: true, // 协议是否同意


				lists: [],
				info: {
					shop_name: '', //店铺名称
					shop_logo: '', //店铺LOGO
					link_user: "", //联系人
					link_mobile: "", //联系电话
					op_object: '', //经营范围
					fp_type: "", // 公司发票类型
					company_name: "", //公司名称
					register_no: '', //工商注册号
					city: '', //省市区
					op_area: '', //经营位置
					lc_image: '', //营业执照
					door_image: '', //门头照片
					gz_image: '', //公章照片
				}

			}
		},
		onShow() {

		},
		onLoad(e) {
			this.$getUserInfo()
			this.$nextTick(() => {
				this.lists = area
			})
		},
		//下拉刷新
		onPullDownRefresh() {


		},
		//加载更多
		onReachBottom() {

		},

		methods: {
			regionChange(region) {

				this.info.city = region[0].label + region[1].label + region[2].label
			},
			clickLeft() {
				uni.navigateBack()
			},
			statusButtonClick() {
				this.isShow = false
			},
			addressClick() {
				var that = this
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
						var address = res.address + res.name

						that.info1.sf_address = address
						console.log(that.info1.sf_address)
						that.info1.lat = res.latitude
						that.info1.lng = res.longitude

					}
				});
			},
			$getUserInfo() {
				getUserInfo().then(res => {
					if (res.code == 1) {
						this.userInfo = res.data;
						this.showView()
					}
				});
			},
			showView() {

				if (Number(this.userInfo.shop_status) == 10) {
					this.isShow = false
				} else {
					this.isShow = true
				}

			},
			tabItemClick(index) {
				this.tabIndex = index
				this.showView()
			},
			shopApply() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				var url = shopApply
				var data = this.info

				url(data).then(res => {
					// if(res.code==1){
					// 	setTimeout(() => {
					// 		uni.navigateBack()
					// 	}, 2000)
					// }
					this.showToast(res.msg)
					this.$getUserInfo()

				}).catch(err => {
					uni.hideLoading();
					// this.showToast('请求失败')
				});
			},
			buttonClick() {

				if (!this.info.shop_name.length) {
					this.showToast('请输入店铺名称')
					return
				}
				if (!this.info.shop_logo.length) {
					this.showToast('请输入店铺LOGO')
					return
				}
				// if (!this.info.link_user.length) {
				// 	this.showToast('请输入联系人')
				// 	return
				// }
				if (!this.info.link_mobile.length) {
					this.showToast('请输入联系电话')
					return
				}
				// if (!this.info.op_object.length) {
				// 	this.showToast('请输入经营范围')
				// 	return
				// }
				// if (!this.info.fp_type.length) {
				// 	this.showToast('请输入公司发票类型')
				// 	return
				// }
				// if (!this.info.company_name.length) {
				// 	this.showToast('请输入公司名称')
				// 	return
				// }
				// if (!this.info.register_no.length) {
				// 	this.showToast('请输入工商注册号')
				// 	return
				// }
				// if (!this.info.city.length) {
				// 	this.showToast('请选择省市区')
				// 	return
				// }
				// if (!this.info.op_area.length) {
				// 	this.showToast('请输入经营位置')
				// 	return
				// }
				// if (!this.info.lc_image.length) {
				// 	this.showToast('请上传营业执照')
				// 	return
				// }
				// if (!this.info.door_image.length) {
				// 	this.showToast('请上传门头照片')
				// 	return
				// }
				// if (!this.info.gz_image.length) {
				// 	this.showToast('请上传公章照片')
				// 	return
				// }
				if (!this.isAgreeProtocol)
					return uni.showToast({
						title: '请先阅读并同意协议',
						icon: 'none'
					});
				this.shopApply()



			},

			//logo
			afterRead(e) {

				const file = e
				console.log(file)
				file.forEach(item => {
					uploadFile(item.path).then(res => {
						uni.hideLoading();

						this.info.shop_logo = res.url



					});
				})
			},
			afterRead1(e) {

				const file = e
				console.log(file)
				file.forEach(item => {
					uploadFile(item.path).then(res => {
						uni.hideLoading();

						this.info.lc_image = res.url



					});
				})
			},
			afterRead2(e) {

				const file = e
				console.log(file)
				file.forEach(item => {
					uploadFile(item.path).then(res => {
						uni.hideLoading();

						this.info.door_image = res.url



					});
				})
			},
			afterRead3(e) {

				const file = e
				console.log(file)
				file.forEach(item => {
					uploadFile(item.path).then(res => {
						uni.hideLoading();

						this.info.gz_image = res.url



					});
				})
			},
			showToast(title) {
				uni.showToast({
					title: title,
					icon: 'none'
				})
			},
			toUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		position: relative;
	}

	.topImage {
		margin-top: -140rpx;
		z-index: 1;
		width: 100%;
		background-image: url('/static/image/settled.png');
		background-size: 100% 100%;
		margin-bottom: -64rpx;
	}

	.contentView {
		position: relative;
		z-index: 2;
		margin: 20rpx;
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 11rpx 11rpx 11rpx 11rpx;
		opacity: 1;
	}

	.contentView1 {
		position: relative;
		z-index: 2;
		margin: 20rpx;
		padding: 20rpx;
		height: 500rpx;
		background: #FFFFFF;
		border-radius: 11rpx 11rpx 11rpx 11rpx;
		opacity: 1;
	}

	.title {
		margin: 10rpx 0;
		font-size: 27rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 550;
		color: #333333;
	}

	.itemView {
		height: 80rpx;
	}

	.itemTitle {
		width: 190rpx;
		font-size: 27rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
	}

	.uploadImage {
		width: 229rpx;
		height: 229rpx;
		background: #F6F9FB;
		border-radius: 11rpx 11rpx 11rpx 11rpx;
		opacity: 1;
		border: 2rpx solid $base-color;
	}

	.uploadImage1 {
		width: 326rpx;
		height: 198rpx;
		border-radius: 11rpx 11rpx 11rpx 11rpx;
		opacity: 1;
		border: 2rpx solid $base-color;
	}

	.button {

		font-size: 27rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		margin: 26rpx 20rpx;
		height: 86rpx;
		background: $base-color;
		border-radius: 69rpx 69rpx 69rpx 69rpx;
		opacity: 1;
	}

	.tabItem {
		margin-top: 30rpx;
		width: 326rpx;
		height: 195rpx;
		background: #FFFFFF;
		border-radius: 11rpx 11rpx 11rpx 11rpx;
		opacity: 1;
		border: 2rpx solid #EEEEEE;
	}

	.tabItemImage {
		width: 57rpx;
		height: 52rpx;
	}

	.tabItemName {
		margin-top: 10rpx;
		font-size: 27rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #666666;
	}

	.tabItem1 {
		border: 2rpx solid $base-color;
	}

	.tabItemName1 {
		color: $base-color;
	}

	.uploadImage1 {
		width: 326rpx;
		height: 198rpx;
		border-radius: 11rpx 11rpx 11rpx 11rpx;
	}

	.statusTitle {
		margin-top: 14rpx;
		font-size: 31rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #666666;
	}

	.statusImage {
		width: 138rpx;
		height: 138rpx;
	}

	.statusButton {
		margin-top: 20rpx;
		font-size: 31rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		width: 198rpx;
		height: 61rpx;
		background: $base-color;
		border-radius: 57rpx 57rpx 57rpx 57rpx;
		opacity: 1;
	}

	input {
		color: #000;
	}
</style>